import { nanoid } from "nanoid";
import React, { Component } from "react";
import { connect } from "react-redux";
import { addPerson } from "../../redux/action/person";
class Person extends Component {
  handlePerson = () => {
    const { value: name } = this.personName;
    const { value: age } = this.age;
    console.log(name, age);
    const personObj = {id:nanoid(),name,age}
    this.props.addPerson(personObj)
  };
  render() {
    return (
      <div>
        <h2>上面组件的和为{this.props.count}</h2>
        <div>
          <input ref={(c) => (this.personName = c)} type="text" />
          <input ref={(c) => (this.age = c)} type="text" />
          <button onClick={this.handlePerson}>增加</button>
        </div>
        <ul>
          {this.props.persons.map((person) => {
            return (
              <li key={person.id}>
                {person.name}---{person.age}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
export default connect((state) => ({ count: state.count, persons: state.persons }), {
  addPerson,
})(Person);
